<template>
  <el-drawer
  :title="title"
  :visible.sync="dialogVisible"
  width="30%"
  :close-on-click-modal="false"
  :before-close="handleClose">
    <el-form :model="roleForm" ref="roleForm" :rules="rules" label-width="80px">
      <el-form-item label="名称:" prop="roleName">
        <el-input v-model="roleForm.roleName" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" rows="3" v-model="roleForm.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="排序值:">
        <el-input v-model.number="roleForm.roleSort" placeholder="请输入排序值"/>
      </el-form-item>

      <!-- 菜单权限 -->
      <el-form-item label="菜单权限:">
        <DataTree
        :tree-label.sync="treeLabel"
        :tree-datas.sync="menuTreeDatas"
        :tree-value.sync="roleForm.menuIds"
        :default-checked-keys.sync="defaultCheckedKeys"/>
      </el-form-item>
    </el-form>

    <span class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="confirm">确 定</el-button>
    </span>
  </el-drawer>
</template>
<script>
import DataTree from '@/components/DataTree/index.vue'

import { merchantsMenuTreeList } from '@/api/merchants/menu'
import { merchantsRoleDetail, merchantsRoleAdd, merchantsRoleEdit } from '@/api/merchants/role'

export default {
  name: 'MerchantsRoleAdd',
  components: {
    DataTree
  },
  props: {
    rowId:{
      type: Number,
      default: ()=> null
    },
    title: {
      type: String,
      default: ()=> null
    },
    showDialog: {
      type: Boolean,
      default: ()=> false
    }
  },
  computed: {
    dialogVisible: {
      get(){
        return this.showDialog
      }
    }
  },
  watch: {
    rowId: {
      handler(rowId){
        console.log(rowId)
        if(!rowId || rowId <= 0) return
        this.loadRoleDataDetail(rowId)
      }
    }
  },
  data() {
    return {
      roleForm: null,
      initForm: {
        roleName: '',
        remark: '',
        menuIds: [],
        roleSort: 100
      },
      rules: {
        roleName:[{ required: true, message: '请输入角色名称', trigger: 'blur, change' }]
      },
      loading: false,
      menuTreeDatas: null,
      treeLabel: 'menuName',
      defaultCheckedKeys: null
    }
  },
  created(){
    this.roleForm = { ...this.initForm }
    this.loadMenuTreeData()
  },
  methods: {
    // 加载菜单权限数据
    async loadMenuTreeData() {
      const res = await merchantsMenuTreeList()
      this.menuTreeDatas = res.data
    },

    // 数据详情
    async loadRoleDataDetail(rowId){
      const res = await merchantsRoleDetail(rowId)
      console.log(res)
      this.roleForm = res.data
      if(res.data.menuVos && res.data.menuVos.length > 0){
        this.roleForm.menuIds = res.data.menuVos.map(item=> item.id)
        this.defaultCheckedKeys = res.data.menuVos.map(item=> item.id)
      }
    },

    // 关闭窗口
    handleClose() {
      this.$emit('update:showDialog', false)
      this.$emit('update:rowId', null)
      this.loading = false
      this.roleForm = { ...this.initForm }
      this.$refs.roleForm.resetFields()
    },

    // 确定
    confirm() {
      this.$refs.roleForm.validate(async (valid) => {
        if(valid){
          this.loading = true
          if(!this.rowId){
            await merchantsRoleAdd(this.roleForm)
           this.handleClose()
          }else {
            await merchantsRoleEdit(this.roleForm)
            this.handleClose()
          }
          this.$emit('reloadData')
        }else {
          console.log('error submit!!');
          this.loading = false
          return false;
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>

</style>